<template>
  <div>
    <div class="header-name">
      <el-form :model="searDa" label-width="80px" size="mini">
        <el-form-item :label="$t('shop.state')">
          <el-select v-model="searDa.purchaserStatus">
            <el-option :label="$t('market.all')" value="2" />
            <el-option :label="$t('market.normal')" value="1" />
            <el-option :label="$t('market.lateDeli')" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('market.signIn')">
          <el-select v-model="searDa.fullStatus">
            <el-option :label="$t('market.all')" value="2" />
            <el-option :label="$t('market.allGoods')" value="1" />
            <el-option :label="$t('market.oweGoods')" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('market.purchaser')">
          <el-input v-model="nameList" size="mini">
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="purchaseVisiblit=true"
            />
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('shop.fnumber1')">
          <el-input v-model="searDa.fnumber" size="mini" />
        </el-form-item>
        <el-form-item :label="$t('market.fdate')">
          <el-date-picker
            v-model="value"
            type="daterange"
            align="right"
            value-format="yyyy-MM-dd"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 220px"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item label-width="50px">
          <el-button type="primary" size="mini" @click="balance">{{ $t('btn.search') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <jc-table
        class="tabMar"
        :table-data="tableData"
        :table-header="tableHeader"
        :table-height="height"
        serial
      >
        <el-table-column :label="$t('shop.state')" prop="purchaserStatus" align="center" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.purchaserStatus==='迟交'" type="danger">{{ scope.row.purchaserStatus }}</el-tag>
            <el-tag v-else>{{ scope.row.purchaserStatus }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('market.signIn')" prop="fullStatus" align="center" width="80" show-overflow-tooltip />
        <el-table-column :label="$t('market.staff')" prop="purchaserUserName" align="center" width="80" show-overflow-tooltip />
        <el-table-column :label="$t('market.purchaseno')" prop="purchaserOrderNo" align="center" width="120" show-overflow-tooltip />
        <el-table-column :label="$t('market.purchaseDate')" prop="fdate" align="center" width="100" show-overflow-tooltip />
        <el-table-column :label="$t('market.settleDate')" prop="fdeliveryDate" align="center" width="90" />
        <el-table-column :label="$t('market.order')" prop="saleOrderNo" align="center" width="120" show-overflow-tooltip />
        <el-table-column :label="$t('market.suppliername')" prop="supplierName" align="center" width="130" show-overflow-tooltip />
        <el-table-column :label="$t('shop.customerOrder')" prop="customerOrderNo" align="center" width="120" show-overflow-tooltip />
        <el-table-column :label="$t('market.fmodel')" prop="fmodel" align="center" show-overflow-tooltip />
        <el-table-column :label="$t('market.fmaterial')" prop="fnumber" align="center" width="120" show-overflow-tooltip />
        <el-table-column :label="$t('shop.fname2')" prop="materialName" align="center" width="140" show-overflow-tooltip />
        <el-table-column :label="$t('shop.fspecificaTion')" prop="fspecification" align="center" show-overflow-tooltip />
        <el-table-column :label="$t('market.purchaserQty')" prop="fQty" align="center" width="80" />
        <el-table-column :label="$t('market.purinstockqty')" prop="fstockinQty" align="center" width="80" />
        <el-table-column :label="$t('menu.safeStock')" prop="safetyStock" align="center" width="80" />
        <el-table-column :label="$t('market.purchaserCycle')" prop="purchaserCycle" align="center" width="80" />
        <el-table-column :label="$t('market.lessQuantity')" align="center">
          <el-table-column :label="$t('market.intranatal')" prop="deliveryDate" align="center" width="70" />
          <el-table-column :label="$t('market.delay15')" prop="15delay" align="center" width="70" />
          <el-table-column :label="$t('market.delay30')" prop="30delay" align="center" width="70" />
          <el-table-column :label="$t('market.delay')" prop="delay" align="center" width="70" />
        </el-table-column>
        <el-table-column :label="$t('market.stockQty')" align="center">
          <el-table-column :label="$t('market.delay15')" prop="15stock" align="center" width="70" />
          <el-table-column :label="$t('market.delay30')" prop="30stock" align="center" width="70" />
          <el-table-column :label="$t('market.delay60')" prop="60stock" align="center" width="70" />
          <el-table-column :label="$t('market.stock60')" prop="stock" align="center" width="70" />
        </el-table-column>
      </jc-table>
      <el-tabs type="card" @tab-click="handelclick">
        <el-tab-pane label="全部" name="" />
        <el-tab-pane v-for="item in tabArr" :key="item.label" :label="item.label" :name="item.name" />
      </el-tabs>
    </div>
    <div class="footer">
      <jc-pagination
        :total="total"
        :page.sync="currentPage"
        :limit.sync="size"
        @pagination="balance"
      />
    </div>
    <!--采购员-->
    <market v-if="purchaseVisiblit" :staff-type="staffType" select-check @market="purchaseData" />
  </div>
</template>

<script>
import { getPoorderList } from '@/api/homePage/business'

export default {
  components: {
    market: () => import('@/views/market/marketManage/createMarkerOrder/components/market')
  },
  props: {
    height: {
      type: String,
      default: '400px'
    }
  },
  data() {
    return {
      ftype: 65,
      tableData: [],
      tableHeader: [],
      searDa: {
        fnumber: '',
        purchaserStatus: '2',
        fullStatus: '0'
      },
      value: [],
      nameList: '',
      currentPage: 1,
      size: 50,
      total: 0,
      purchaseVisiblit: false,
      tabArr: [
        { label: '餐台', name: '餐台' },
        { label: '餐椅', name: '餐椅' },
        { label: '管材', name: '管材' },
        { label: '包材', name: '包材' },
        { label: '泡沫', name: '泡沫' },
        { label: '软体', name: '软体' },
        { label: '下架', name: '下架' },
        { label: '布', name: '布' },
        { label: '瓷砖', name: '瓷砖' },
        { label: '铁片', name: '铁片' },
        { label: '螺丝', name: '螺丝' },
        { label: '弹簧', name: '弹簧' }
      ],
      staffType: 2, // 采购员
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.balance()
  },
  methods: {
    // 点击标签页搜索
    handelclick(tab) {
      this.searDa.fname = tab.name
      this.balance()
    },
    // 实时采购订单需求清单
    balance() {
      const DATA = {
        pageNum: this.currentPage,
        pageSize: this.size,
        ...this.searDa,
        startDate: this.value[0],
        endDate: this.value[1],
        purchaserIdList: this.nameId
      }
      getPoorderList(DATA).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.data
          this.total = Number(res.data.total)
        }
      })
    },
    // 获取采购员
    purchaseData(ev, en) {
      if (ev.fuserId) {
        this.nameList = ev.fuserName
        this.nameId = [ev.fuserId]
      } else if (ev.length > 0) {
        this.nameList = ev.join(',')
        this.nameId = en
      }
      this.purchaseVisiblit = false
    }
  }
}
</script>

<style scoped lang="scss">
.header-name {
  .btn {
    margin-left: 30px;
  }
  .btn1 {
    font-size: 14px;
    margin-right: 5px;
    margin-left: 460px;
    margin-top: 4px;
  }
  .btn2 {
    margin-left: 0;
    width: 170px;
  }
  .el-form {
    display: flex;
    position: relative;
    top: 5px;
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
 .el-tabs {
   position: absolute;
   max-width: 470px;
   &::v-deep .el-tabs__nav-next, &::v-deep .el-tabs__nav-prev {
     line-height: 30px!important;
   }
   z-index: 9999;
 }
.tabMar {
  margin-top: 10px;
}
</style>

